<template>
  <div class="main">

    <div class="main-left">
      <perfect-scrollbar style="height: 100%;">
        <left-menu />
      </perfect-scrollbar>
    </div>
    <div class="main-right">
      <!-- <div class="main-right-top"> -->
        <main-tool-bar class="main-right-top" />
        <TagList />
      <!-- </div> -->
      <div class="main-right-bottom">

            <router-view v-slot="{ Component }" style="position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              padding: 12px;">
              <transition name="slide-fade">
                <keep-alive>
                  <suspense>
                    <component :is="Component" />
                    <template #fallback>
                      <div>
                        Loading...
                      </div>
                    </template>
                  </suspense>
                </keep-alive>
              </transition>
            </router-view>


      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import leftMenu from './leftMenu.vue'
import mainToolBar from './mainToolBar'
import TagList from './TagList'

export default {
  name: 'Home',
  components: {
    HelloWorld,
    leftMenu,
    mainToolBar,
    TagList
  }
}
</script>

<style scoped lang='less'>
.main{
  width: 100%;
  height: 100%;
  display: flex;
  .main-left{
    width: auto;
    // width: 240px;
    height: 100%;
    // background: blue;
  }
  .main-right{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    .main-right-bottom{
      // background: orange;
      position: relative;
      // padding: 12px;
      flex: 1;
      width: 100%;
    }
  }
}


.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>